<div class="w-full px-3 py-1 border-b border-gray-100 flex items-center justify-between dark:border-neutral-800">
  @if (isMobile()) {
    <button mat-icon-button displayDensity="compact" (click)="close()">
      <mat-icon>close</mat-icon>
    </button>
  }
  <h3 class="font-semibold">
    {{ 'PAC.ChatBI.Cubes' | translate: {Default: 'Cubes'} }}
  </h3>

  <span class="flex-1"></span>
  <ngm-search [(ngModel)]="search" class="rounded-xl overflow-hidden" />
</div>

<div class="w-full flex-1 py-2 overflow-auto relative">
  <cdk-virtual-scroll-viewport class="flex-1 w-full h-full overflow-hidden hover:overflow-y-auto"
    itemSize="64" minBufferPx="360" maxBufferPx="1000"
  >
    <div *cdkVirtualFor="let option of cubeSelectOptions(); trackBy: trackByKey"
      class="ngm-chatbi__cube shrink-0 min-h-[64px] group relative gap-3 rounded-2xl overflow-hidden cursor-pointer mx-2 mb-2
        transition duration-500 border border-transparent"
        [ngClass]="{
          'selected': cube() === option.key,
        }"
        (click)="onCubeChange(option.key)"
      >
      <div class="w-full flex flex-col items-stretch justify-start pb-2">
        <div class="w-full flex flex-col items-start px-3 py-3.5">
          <ngm-display-behaviour class="w-full line-clamp-1 transition group-hover:text-sky-600 text-base font-semibold" 
            [option]="option" [highlight]="searchText()" />
          <p class="mt-0.5 text-zinc-500 text-xs line-clamp-1">
            {{option.value.description}}
          </p>

          @if (option.expanded) {
            <mat-icon class="cursor-pointer absolute top-4 right-2 rounded-full opacity-30 group-hover:opacity-100 hover:bg-neutral-100/50"
              (click)="toggleExpanded(option)">expand_less</mat-icon>
          } @else {
            <mat-icon class="cursor-pointer absolute top-4 right-2 rounded-full opacity-30 group-hover:opacity-100 hover:bg-neutral-100/50"
              (click)="toggleExpanded(option)">expand_more</mat-icon>
          }
        </div>

        @if (option.expanded) {
          <ngm-entity-schema dragDisabled
            [dataSettings]="{dataSource: dataSourceName(), entitySet: option.key}"
            [capacities]="[
              EntityCapacity.Dimension,
              EntityCapacity.Measure,
              EntityCapacity.Indicator,
              EntityCapacity.Parameter,
            ]"
          />
        }
      </div>
    </div>
  </cdk-virtual-scroll-viewport>

  @if (loadingCubes()) {
    <div class="absolute top-0 left-0 w-full h-full flex justify-center items-center">
      <mat-spinner class="w-12 h-12" [diameter]="36" [strokeWidth]="2" />
    </div>
  }
</div>